<template>
  <div class="component-upload-image">
    <ul class="el-upload-list el-upload-list--picture-card" v-if="fileList">
      <li tabindex="0" class="el-upload-list__item is-success"
        v-for="file in fileList"
        :key="file.uid"
      >
        <!-- 图片 -->
        <img class="el-upload-list__item-thumbnail" alt="" v-if="file.type == eFileType.IMG.code" :src="file.url">
        <!-- 视频 -->
        <video v-if="file.type == eFileType.VIDEO.code"
          :src="file.url"
          class="el-upload-list__item-thumbnail"
          controls="controls">
          您的浏览器不支持视频播放
        </video>
        <!-- 文件 -->
        <div class="el-upload-list__item-thumbnail" style="padding: 11px 27.5px;" v-if="file.type == eFileType.FILE.code">
          <div class="bgImg">
            <div class="content_border">
                <div class="content">{{file.name}}</div>
            </div>
          </div>
        </div>
        <a class="el-upload-list__item-name"><i class="el-icon-document"></i>0ce8bfd6c7025a7f8e92be4b8565e1cc.jpg</a>
        <label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check"></i></label>
        <i class="el-icon-close"></i>
        <i class="el-icon-close-tip">按 delete 键可删除</i><!---->
        <span class="el-upload-list__item-actions"><!---->
          <span class="el-upload-list__item-delete" @click="customRemove(file.uid)"><i class="el-icon-delete"></i></span>
        </span>
      </li>
    </ul>
    <el-upload
      :action="uploadImgUrl"
      :headers="headers"
      list-type="picture-card"
      :on-success="handleUploadSuccess"
      :on-remove="handleUploadRemove"
      :before-upload="handleBeforeUpload"
      :on-error="handleUploadError"
      name="file"
      :show-file-list="false"
      :file-list="fileList"
      multiple
      style="display: inline-block; vertical-align: top"
    >
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { FILE_TYPE } from "@/enum/enum";

export default {
  components: {},
  data() {
    return {
      // 枚举属性
      // 文件类型
      eFileType: FILE_TYPE,
      // 文件列表
      fileList: [],
      // 上传图片的服务器地址
      uploadImgUrl: process.env.VUE_APP_STATIC_FILE_URL + "/file/upload",
      headers: {
        token: getToken(),
      },
    };
  },
  props: {
    // 文件路径
    value: {
      type: String,
      default: "",
    },
    // 允许文件类型列表
    type: {
      type: Array,
      default: function(){
            return [FILE_TYPE.IMG];
        },
    }
  },
  created() {
    // 初始化所有文件
    var arr = this.value.split(",");
    arr.forEach(element => {
      var file = {"name": element,"url": process.env.VUE_APP_STATIC_FILE_URL+element,type: this.eFileType.IMG.code};
    // 设置文件名(去掉'/'前的部分)
      if(element){
        const indexOf = element.lastIndexOf("/")>element.lastIndexOf("\\")?element.lastIndexOf("/"):element.lastIndexOf("\\");
        file.name = element.substring(indexOf+1);
      }
      // 设置文件类型
      file.type = this.getFileType(element);
      this.fileList.push(file);
    });
  },
  methods: {
    handleUploadSuccess(res,file,fileList) {
      if(res.code != 200){
        this.loading.close();
        return;
      }
      // 重置文件列表
      this.fileList = fileList;
      // 获取要返回的列表值
      var val = "";
      fileList.forEach(element => {
        var url = element.response?element.response.data:element.url.substring(process.env.VUE_APP_STATIC_FILE_URL.length);
        // 设置文件类型
        file.type = this.getFileType(url);
        // 获取要返回的列表值
        element.url = process.env.VUE_APP_STATIC_FILE_URL+url;
        val+=url+","
      });
      val = val.substring(0,val.length-1)
      this.$emit("input", val);
      this.loading.close();
    },
    handleUploadRemove(file,fileList) {
      // 重置文件列表
      this.fileList = fileList;
      // 获取要返回的列表值
      var val = "";
      fileList.forEach(element => {
        val+=(element.response?element.response.data:element.url.substring(process.env.VUE_APP_STATIC_FILE_URL.length))+","
      });
      val = val.substring(0,val.length-1)
      this.$emit("input", val);
    },
    customRemove(uid) {
      var val = [];
      this.fileList.forEach(element => {
        if(element.uid != uid){
          val.push(element)
        }
      });
      this.handleUploadRemove(null,val);
    },
    handleBeforeUpload(file) {
      // 如果不包含可以上传的类型就结束
      if(!this.isIncludeTypeAll(this.getFileType(file.name))){
        return false;
      }
      this.loading = this.$loading({
        lock: true,
        text: "上传中",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    handleUploadError() {
      this.$message({
        type: "error",
        message: "上传失败",
      });
      this.loading.close();
    },
    // 判断是否包含这个文件的类型
    isIncludeType(code) {
      var isIncludeType = false;
      this.type.forEach(element => {
        if(element.code == code){
          isIncludeType = true;
        }
      });
      return isIncludeType;
    },
    // 判断是否包含这个文件的类型
    isIncludeTypeAll(code) {
      // 通用code
      const codeGeneral = this.eFileType.FILE.code;
      var isIncludeType = false;
      this.type.forEach(element => {
        const elementCode = element.code;
        if(elementCode == code || elementCode == codeGeneral){
          isIncludeType = true;
        }
      });
      return isIncludeType;
    }
  },
  watch: {},
};
</script>

<style scoped lang="scss">
.avatar {
  width: 100%;
  height: 100%;
}
.bgImg {
  width:91px;
  height:122px;
  padding-top:30px;
  padding-right:11.5px;
  padding-left:11.5px;
  padding-bottom:12px;
  background-image: url("../../assets/image/file.png");
  background-size: cover;
}
.content_border {
  position: absolute;
  width: 68px;
  height: 80px;
}
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 68px;
  max-height: 80px;
  line-height: 15px;
  text-align: center;
  overflow: hidden;
  text-overflow:ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
</style>